<template>
    <div class="container" @load="updateTime">
        <el-container>
            <!-- 顶部开始 -->
            <el-header>
                <el-row>
                    <el-col :span="8">
                        <div class="grid-content title">水墨丹青</div>
                    </el-col>
                    <el-col :span="8"></el-col>
                    <el-col :span="8">
                        <el-row>
                            <el-col :span="6">欢迎你， {{ login.username }}</el-col>
                            <el-col :span="12">{{ time }}</el-col>
                            <el-col :span="6">
                                <el-dropdown>
                                    <span class="logout">
                                        设置
                                    </span>
                                    <template #dropdown>
                                        <el-dropdown-menu>
                                            <el-dropdown-item @click="modifyPass">修改密码</el-dropdown-item>
                                            <el-dropdown-item @click="logout">注销</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </template>
                                </el-dropdown>
                            </el-col>
                        </el-row>
                    </el-col>
                </el-row>
            </el-header>
            <!-- 顶部结束 -->
            <el-container>
                <!-- 侧边导航栏 开始 -->
                <el-aside width="400px">
                    <el-menu class="el-menu-vertical-demo" default-active="1-1">
                        <el-sub-menu index="1">
                            <template #title>
                                <span>首页</span>
                            </template>
                            <el-menu-item index="1-1" @click="analyse">数据监控</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="2">
                            <el-icon-location />
                            <template #title>
                                <i class=""></i>
                                <span>用户管理</span>
                            </template>
                            <el-menu-item index="2-1" @click="userTable">用户列表</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="3">
                            <el-icon-location />
                            <template #title>
                                <i class=""></i>
                                <span>图书类型管理</span>
                            </template>
                            <el-menu-item index="3-1" @click="typeTable">图书类型列表</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="4">
                            <el-icon-location />
                            <template #title>
                                <i class=""></i>
                                <span>图书管理</span>
                            </template>
                            <el-menu-item index="4-1" @click="bookTable">图书列表</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="5">
                            <el-icon-location />
                            <template #title>
                                <i class=""></i>
                                <span>评分记录管理</span>
                            </template>
                            <el-menu-item index="5-1" @click="scoreTable">评分记录列表</el-menu-item>
                        </el-sub-menu>
                        <el-sub-menu index="6">
                            <el-icon-location />
                            <template #title>
                                <i class=""></i>
                                <span>评论记录管理</span>
                            </template>
                            <el-menu-item index="6-1" @click="comment">评分记录列表</el-menu-item>
                        </el-sub-menu>
                    </el-menu>
                </el-aside>
                <!-- 侧边导航栏 结束 -->
                <el-main>
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
        <el-dialog :title="修改密码" v-model="editPass.dialogVisible" width="40%" :before-close="handleClose">
            <el-form :model="editPass.form" :rules="rules">
                <el-form-item label="原密码" :label-width="formLabelWidth" prop="old">
                    <el-input v-model="editPass.form.old" type="password" show-password autocomplete="off" />
                </el-form-item>
                <el-form-item label="新密码" :label-width="formLabelWidth" prop="new">
                    <el-input v-model="editPass.form.new" autocomplete="off" type="password" show-password />
                </el-form-item>
                <el-form-item label="确认新密码" :label-width="formLabelWidth" prop="repass">
                    <el-input v-model="editPass.form.repass" autocomplete="off" type="password" show-password />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="handleC">取消</el-button>
                    <el-button type="primary" @click="modify">提交</el-button>
                </span>
            </template>
        </el-dialog>

    </div>

</template>

<script>

import axios from 'axios'
import { alertProps } from 'element-plus';

export default {
    name: 'register',
    componets: {
    },
    data() {
        var checkOldPass = (rule, value, callback) => {
            axios.get('http://localhost:8080/admin/' + this.login.username + "/" + value)
                .then(data => {
                    if (data.data.code == 1) {
                        callback();
                    } else {
                        callback(new Error("请输入正确的原密码！"));
                    }
                }).catch();
        };
        var checkNewPass = (rule, value, callback) => {
            if (value != this.editPass.form.new) {
                callback(new Error("两次输入密码不一致！"));
            }
            callback();
        };
        return {
            time: '',
            login: {},
            editPass: {
                dialogVisible: false,
                formLabelWidth: '80px',
                disabled: true,
                timer: null,
                form: {
                    old: '',
                    new: '',
                    repass: '',
                },
                options: [],
                imageUrl: ''
            },
            rules: {
                old: [
                    { required: true, message: '请输入旧密码', trigger: 'blur', },
                    {
                        validator: checkOldPass,
                        trigger: 'blur'
                    }
                ],
                new: [
                    { required: true, message: '请输入新密码', trigger: 'blur', },
                    {
                        min: 6,
                        max: 16,
                        message: '长度在 6 到 16 个字符',
                        trigger: 'blur',
                    },

                ],
                repass: [
                    { required: true, message: '请确认新密码', trigger: 'blur', },
                    {
                        min: 6,
                        max: 16,
                        message: '长度在 6 到 16 个字符',
                        trigger: 'blur',
                    },
                    {
                        validator: checkNewPass,
                        trigger: 'blur'
                    }
                ],
            },
        }
    },
    methods: {
        analyse() {
            this.$router.push("/analyse")
        },
        userTable() {
            this.$router.push("/userTable")
        },
        typeTable() {
            this.$router.push("/typeTable")
        },
        bookTable() {
            this.$router.push("/bookTable")
        },
        scoreTable() {
            this.$router.push("/scoreTable")
        },
        comment() {
            this.$router.push("/comment")
        },
        logout() {
            this.$router.push("/");
            window.localStorage.setItem('login', {});
        },
        modifyPass() {
            this.editPass.dialogVisible = true;
        },
        modify() {
            axios.post('http://localhost:8080/admin/update?password=' + this.editPass.form.new + "&id=" + this.login.id)
                .then(data => {
                    if (data.data.code == 1) {
                        alert("修改成功");
                        this.$router.push("/");
                        
                    } else {
                        alert("修改失败！");
                    }
                }).catch();
                this.editPass.form.old == "";
                this.editPass.form.new == "";
                this.editPass.form.repass == "";
        }
    },
    mounted() {
        this.time = new Date().toLocaleString();
        this.login = JSON.parse(window.localStorage.login);
    },
}
</script>

<style scoped>
.container {
    background-color: #889CA3;
    background-size: 100%;
    height: 935px;
    width: 100%;
    position: relative;
}

.el-container {
    height: 100%;
}

.el-header {
    background-color: #384254;
    height: 80px;
    color: #23282E;
}

.el-menu {
    background-color: #616079;
    width: 100%;
    color: #23282E;
}


.el-header .title {
    font-size: 40px;
    font-family: 'hand_writing';
}

.el-header .grid-content {
    line-height: 80px;
}

.el-header .el-row {
    line-height: 80px;
}

.logout {
    text-align: center;
    line-height: 80px;
    font-size: 16px;
}

.el-menu-vertical-demo:not(.el-menu--collapse) {
    width: 200px;
    min-height: 400px;
}

.el-aside {
    height: 100%;
    background-color: #616079;
    width: 200px;
}

iframe {
    width: 100%;
    height: 100%;
}
</style>